<template>
    <div class="container">

        <!-- 面包屑导航栏 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
            <el-breadcrumb-item>门店管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row style="margin-top: 10px;">
            <el-button size="mini">全部门店</el-button>
            <el-button size="mini">上架中</el-button>
            <el-button size="mini">已下架</el-button>
        </el-row>

        <!-- 模糊搜索框 -->
        <el-row style="margin-top: 10px;">
            <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
                <!-- 门店名称框 -->
                <el-form-item label="门店名称">
                    <el-input clearable @clear="querySearchShopList" v-model="queryInfo.keyword"
                        placeholder="请输入门店名称"></el-input>
                </el-form-item>
                <el-form-item label="门店手机号">
                    <el-input clearable @clear="querySearchShopList" v-model="queryInfo.phone"
                        placeholder="请输入门店手机号"></el-input>
                </el-form-item>
                <!-- 时间框 -->
                <el-form-item label="提交日期">
                    <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="date" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!-- 搜索框 -->
                <el-form-item>
                    <el-button @click="querySearchShopList" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!-- 新增门店按钮 -->
        <el-row style="margin-bottom: 10px;">
            <el-button @click="addstore" type="primary">新增门店</el-button>
        </el-row>

        <!-- 表格展示门店信息 -->
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: '#1890ff', color: '#fff' }"
            style="width: 100%">
            <el-table-column align="center" prop="shopName" label="门店">
            </el-table-column>
            <el-table-column align="center" prop="shopId" label="ID">
            </el-table-column>
            <el-table-column align="center" prop="shopPhone" label="门店手机号">
            </el-table-column>
            <el-table-column align="center" label="门店地址">
                <!-- 使用作用域插槽 -->
                <template slot-scope="scope">
                    {{ scope.row.shopProvince }}
                    {{ scope.row.shopCity }}
                    {{ scope.row.shopDistrict }}
                    {{ scope.row.shopAddress }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="shopDescribe" label="营业时间">
            </el-table-column>
            <el-table-column align="center" prop="shopCommunitySort" label="关联小区">
            </el-table-column>
            <el-table-column align="center" prop="salesVolume" label="订单总数">
            </el-table-column>
            <el-table-column align="center" label="提交方式">
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tooltip content="看什么？没见过文字提示框？" placement="top">
                        <el-button v-if="scope.row.shopStatus == 1" type="success" size="mini">上架中</el-button>
                        <el-button v-if="scope.row.shopStatus == 0" type="danger" plain size="mini">已下架</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <!-- 使用作用域插槽 -->
                <template slot-scope="scope">
                    <el-link @click="mgt" type="primary" :underline="false">管理门店</el-link>
                    <el-link @click="editshop(scope.row)" type="primary" :underline="false">修改门店资料</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页按钮-->
        <el-row style="margin-top: 10px;">
            <!-- current-page:要访问的页码 -->
            <!-- page-size：每页展示的条数 -->
            <!-- page-sizes：可选择的每页展示的条数 -->
            <!-- total：数据总条数 -->
            <!-- current-change: 当选择页码时触发的函数 -->
            <!-- size-change： -->
            <el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]"
                :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-row>

        <!-- 添加或修改门店的对话框 -->
        <!-- title:对话框名称 -->
        <!-- visible.sync： true对话框显示，false对话框隐藏-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
            <el-form :model="shop" :rules="rules" ref="shop" hide-required-asterisk>
                <el-form-item label="门店名称" prop="shopName" label-width="100px">
                    <el-input placeholder="请输入门店名称" v-model="shop.shopName"></el-input>
                </el-form-item>
                <el-form-item label="门店手机号" prop="shopPhone" label-width="100px">
                    <el-input placeholder="请输入门店手机号" v-model="shop.shopPhone"></el-input>
                </el-form-item>
                <el-form-item label="所属地区" label-width="100px">
                    <el-cascader v-model="address" :options="citys"></el-cascader>
                </el-form-item>
                <el-form-item label="" prop="shopAddress" label-width="100px">
                    <el-input placeholder="请填写详细地址" v-model="shop.shopAddress"></el-input>
                </el-form-item>
                <el-form-item label="门店坐标" label-width="100px">
                    <el-button @click="getGeo">获取位置</el-button>
                    <span v-show="shop.shopLongitude">{{ shop.shopLongitude }},{{
                        shop.shopLatitude }}</span>
                </el-form-item>
                <el-form-item label="营业时间" prop="shopDescribe" label-width="100px">
                    <el-input placeholder="请输入门营业时间" v-model="shop.shopDescribe"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="updateshop" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入省市区数据
import citys from "../assets/citydata";
export default {
    data() {
        return {
            queryInfo: {
                pageNum: 1,
                pageSize: 10,
                phone: '',
                keyword: '',
                shopStatus: '',
                startTime: '',
                endTime: '',
            },
            date: null,
            tableData: [],
            total: 1,
            title: '',
            dialogFormVisible: false,
            // 门店对象
            shop: {
                shopName: "",
                shopDescribe: "",
                shopImage: "",
                shopPhone: "",
                shopProvince: "",
                shopCity: "",
                shopDistrict: "",
                shopAddress: "",
                shopLongitude: "",
                shopLatitude: ""
            },
            citys: citys,       // 所有的省市区对象
            address: [],        // 省市区三个数据的数组

            // form表单验证规则
            rules: {
                shopName: [
                    { required: true, message: '请输入门店名称', trigger: 'blur' },
                ],
                shopPhone: [
                    { required: true, message: '请输入门店手机号', trigger: 'blur' },
                ],
                shopAddress: [
                    { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
                shopDescribe: [
                    { required: true, message: '请输入营业时间', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        // 展示新增门店对话框
        addstore() {
            this.dialogFormVisible = true
            this.title = "新增门店";
        },
        // 展示修改的对话框
        editshop(row) {
            this.shop = row
            this.dialogFormVisible = true;
            this.title = '编辑门店'
            this.address = [row.shopProvince, row.shopCity, row.shopDistrict]
        },
        // 获取经纬度
        getGeo() {
            // 获取经纬度之前判断是否已经选择过地址
            if (!this.shop.shopProvince) {
                this.$message.error('请选择所属地区')
                return false
            }
            // 拼接省市区和详细地址
            let addr = this.shop.shopProvince + this.shop.shopCity + this.shop.shopDistrict + this.shop.shopAddress;
            this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
                params: {
                    key: '457886b5972a97e93fb9cdccebfd450f',
                    'address': addr,
                }
            })
                .then(res => {
                    let loc = res.data.geocodes[0].location
                    this.shop.shopLongitude = loc.split(',')[0]
                    this.shop.shopLatitude = loc.split(',')[1]
                    // console.log(this.shop);
                })
        },
        // 添加或修改小区
        updateshop() {
            // 先做form表单验证，判断数据合法性
            this.$refs['shop'].validate((valid) => {
                if (valid) {
                    if (this.title === '新增门店') {
                        // 新增门店执行的post请求
                        this.$http.post('shop/addShop', this.shop)
                            .then(res => {
                                // console.log(res.data);
                                if (res.data.status == 200) {
                                    this.$message.success('添加成功')
                                    this.dialogFormVisible = false
                                    this.querySearchShopList()
                                    this.cancel()
                                } else {
                                    this.$message.error('操作失败')
                                }
                            })
                    } else if (this.title === '编辑门店') {
                        // 修改门店执行的post请求
                        this.$http.post('shop/modifyShop', this.shop)
                            .then(res => {
                                // console.log(res.data);
                                if (res.data.status == 200) {
                                    this.$message.success('修改成功')
                                    this.dialogFormVisible = false
                                    this.querySearchShopList()
                                    this.cancel()
                                } else {
                                    this.$message.error('操作失败')
                                }
                            })
                    }

                } else {
                    this.$message.error('格式有误');
                    return false;
                }
            })
        },
        // 添加或修改的取消
        cancel() {
            this.dialogFormVisible = false
            this.shop = {
                shopName: "",
                shopDescribe: "",
                shopImage: "",
                shopPhone: "",
                shopProvince: "",
                shopCity: "",
                shopDistrict: "",
                shopAddress: "",
                shopLongitude: "",
                shopLatitude: ""
            }
            this.address = []
        },
        // 获取所有门店信息
        querySearchShopList() {
            this.$http.get('shop/querySearchShopList', {
                params: this.queryInfo
            })
                .then(res => {
                    // console.log(res.data)
                    if (res.data.status == 200) {
                        // console.log(res.data.data.list)
                        this.tableData = res.data.data.list
                        // 动态赋予数据总条数
                        this.total = res.data.data.total
                    } else {
                        this.$message.error('服务器接口异常！')
                    }
                })
                .catch(error => {
                    this.$message.error('服务器接口异常！')
                })
        },
        // 管理门店跳转路由
        mgt() {
            this.$router.push('/mgtshop')
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryInfo.pageSize = val
            this.queryInfo.pageNum = 1
            this.querySearchShopList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryInfo.pageNum = val
            this.querySearchShopList()
        }
    },
    mounted() {
        this.querySearchShopList()
    },
    // 时间搜索侦听器
    watch: {
        // 要求名称必须和变量名保持一致
        date() {
            if (this.date) {
                this.queryInfo.startTime = this.date[0]
                this.queryInfo.endTime = this.date[1]
            } else {
                this.queryInfo.startTime = ''
                this.queryInfo.endTime = ''
            }
        },
        // 把动态获取的省市区加入到小区对象中
        address() {
            this.shop.shopProvince = this.address[0];
            this.shop.shopCity = this.address[1];
            this.shop.shopDistrict = this.address[2];
        }
    }
}
</script>

<style scoped>

</style>